<template>
  <div class="ql">
    <ul>
      <li>
        <img src="~@/assets/images/jz/home.png" alt="" srcset="">
        <div class="text">首页</div>
      </li>
      <li class="sel">
        <img src="~@/assets/images/jz/express.png" alt="" srcset="">
        <div class="text">物流</div>
      </li>
      <li>
        <img src="~@/assets/images/jz/cangchu.png" alt="" srcset="">
        <div class="text">仓储</div>
      </li>
      <li>
        <img src="~@/assets/images/jz/yuanqu.png" alt="" srcset="">
        <div class="text">园区</div>
      </li>
      <li>
        <img src="~@/assets/images/jz/zhaoshang.png" alt="" srcset="">
        <div class="text">招商</div>
      </li>
      <li>
        <img src="~@/assets/images/jz/jiankong.png" alt="" srcset="">
        <div class="text">监控</div>
      </li>
      <li>
        <img src="~@/assets/images/jz/yingji.png" alt="" srcset="">
        <div class="text">应急</div>
      </li>
    </ul>
  </div>
</template>

<style lang="less">
  .ql {
    position: absolute;
    left: 0px;
    top: 653px;
    width: 380px;
    height: 3414px;
    padding: 184px 0;
    background: url(~@/assets/images/jz/bg-module.png) no-repeat;
    background-size: 380px 3414px;
    ul {

      li {
        &.sel {
          background: url(~@/assets/images/jz/bg-module-sel.png) no-repeat;
          background-size: 380px 435px;
        }
        list-style: none;
        width: 380px;
        height: 435px;
        padding: 55px 0;
        text-align: center;
        img {
          width: 174px;
          height: 165px;
        }
        .text {
          margin-top: 30px;
          font-family: YouSheBiaoTiHei;
          font-size: 80px;
          font-weight: normal;
          letter-spacing: 0em;
          color: #D4E8FF;
          text-shadow: 0px 0px 16px 0px #003DFF;

        }
      }
    }
  }
</style>
